import QtQuick 2.0
import QtQuick.Controls 2.5

Slider {
    id: root
    padding: 0
    from: 0
    to: 90
    stepSize: 1

    background: Rectangle {
        x: root.leftPadding
        y: root.topPadding + root.availableHeight / 2 - height / 2
        width: root.availableWidth
        height: 1
        color: "lightgray"

        Rectangle {
            width: root.visualPosition * parent.width
            height: parent.height
            color: "#3986ff"
        }
    }

    handle: Rectangle {
        id: handler
        x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        implicitWidth: 14
        implicitHeight: 14
        radius: width / 2
        border.width: 2
        border.color: {
            if( pressed ){ return "#3986FF" }
            else if( hovered ){ return "#80B0FF" }
            else { return "#D9D9D9" }
        }
    }
}
